<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	const navListData = [{
		id: 1,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "楷模列表",
		content: "内容"
	}, {
		id: 2,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "英雄故事",
		content: "内容"
	}, {
		id: 3,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "身边英雄",
		content: "内容"
	}, {
		id: 4,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "物资捐赠",
		content: "内容"
	}, {
		id: 5,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "群众需求",
		content: "内容"
	}, {
		id: 6,
		imagePath: '../../static/images/home/bg_001.jpg',
		title: "更多",
		content: "内容"
	}]
	/* const newsData = ref([])
	onMounted(() => {
		uni.request({
			url: 'http://localhost:8080/getNewsData',
			method: "GET",
			success: (res) => {
				uni.setStorage({
					key: 'newsData',
					data: res.data.newsData
				})
				newsData.value = res.data.newsData

			}
		})
	}) */
	const newsData = ref([{
		id: 1,
		title: "标题",
		author: "作者",
		simple: "简介",
		content: "内容",
		imagePath: "../../static/images/home/bg_001.jpg"
	}, {
		id: 2,
		title: "标题2",
		author: "作者2",
		simple: "简介2",
		content: "内容2",
		imagePath: "../../static/images/home/bg_002.jpg"
	}, {
		id: 3,
		title: "标题3--标题3--标题3--标题3--标题3--标题3",
		author: "作者3--作者3--作者3--作者3--作者3--作者3",
		simple: "简介3--简介3--简介3--简介3--简介3--简介3",
		content: "内容3--内容3--内容3--内容3--内容3--内容3",
		imagePath: "../../static/images/home/bg_003.jpg"
	}, {
		id: 4,
		title: "标题--标题--标题--标题--标题--标题",
		author: "作者--作者--作者--作者--作者--作者",
		simple: "简介--简介--简介--简介--简介--简介",
		content: "内容--内容--内容--内容--内容--内容",
		imagePath: "../../static/images/home/bg_004.jpg"
	}, {
		id: 5,
		title: "标题",
		author: "作者",
		simple: "简介",
		content: "内容",
		imagePath: "../../static/images/home/bg_005.jpg"
	}, {
		id: 6,
		title: "标题",
		author: "作者",
		simple: "简介",
		content: "内容",
		imagePath: "../../static/images/home/bg_006.jpg"
	}])


	const swiperImage = newsData

	function navItemClick(index) {
		if (index == 5) {
			uni.navigateTo({
				url: '/pages/HomeMore/HomeMore'
			})
		} else {
			uni.setStorage({
				key: 'navListData',
				data: navListData[index]
			})
			uni.navigateTo({
				url: '/pages/HomeNav/HomeNav'
			})
		}
	}

	function itemClick(item) {
		uni.setStorage({
			key: 'newsDetailsData',
			data: item
		})
		uni.navigateTo({
			url: '/pages/NewsDetails/NewsDetails'
		})
	}

	function moreNews() {
		uni.setStorage({
			key: 'navListData',
			data: navListData.value
		});
		uni.navigateTo({
			url: '/pages/MoreNews/MoreNews'
		})
	}
</script>

<template>
	<view class="home">
		<scroll-view>
			<view class="swiper">
				<swiper :indicator-dots="true" :autoplay="true" :circular="true">
					<swiper-item v-for="(item, index) in swiperImage" :key="index">
						<image :src="item.imagePath"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="page">
				<view class="cotice">
					<view class="left">
						<text>楷模</text>
						<text>公告</text>
					</view>
					<view class="content">
						<text>{{ newsData[2].title }}</text>
						<text>{{ newsData[2].simple }}</text>
					</view>
					<view class="right">
						<image src="../../static/images/home/jump-to.png"></image>
					</view>
				</view>
				<NavVue :navContent="navListData" @navItemClick="navItemClick"></NavVue>
				<view class="news">
					<view class="title">
						<view class="left">
							<text>楷模新闻</text>
						</view>
						<view class="right" @click="moreNews()">
							<text>更多新闻</text>
							<image src="../../static/images/home/jump-to.png"></image>
						</view>
					</view>
					<ListNewsVue :list="newsData" @listItemClick="itemClick"></ListNewsVue>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style scoped lang="scss">
	.page {
		padding-top: 2vh;
	}

	.home {
		.swiper {
			swiper {
				width: 100%;
				height: 28vh;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.cotice {
			width: 92%;
			height: 12vh;
			// margin-top: 2vh;
			border-radius: $uni-border-radius;
			background-color: $uni-bg-color;
			padding: 2vh;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				width: 22%;
				// height: 70%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 5vw;
				font-weight: bold;
				border-right: #8a8a8a solid 1vw;

				text {
					&:first-child {
						color: $uni-title-border-color;
					}
				}
			}

			.content {
				width: 60%;
				display: flex;
				flex-direction: column;

				text {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					&:first-child {
						white-space: Pre-wrap;
					}

					&:last-child {
						font-size: 3vw;
						margin-top: 2vh;
						color: #8a8a8a;
					}
				}
			}

			.right {
				image {
					width: 4vw;
					height: 4vw;
				}
			}
		}

		.nav {
			margin-top: 2vh;
		}

		.news {
			margin-top: 2vh;
			border-radius: $uni-border-radius;

			.title {
				width: 100%;
				height: 8vh;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.left {
					color: #000;
					font-size: 6vw;
					font-weight: bold;
					border-left: $uni-title-border-color solid 1vw;
					padding-left: 4vw;
				}

				.right {
					color: #8a8a8a;
					display: flex;
					flex-direction: row;
					align-items: center;

					image {
						margin-left: 2vw;
						width: 4vw;
						height: 4vw;
					}
				}
			}
		}
	}
</style>